<template>
  <el-dialog
    width="1400px"
    title="选择员工"
    :visible.sync="myVisible"
    @close="close"
  >
    <Table
      :columnProps="columnProps"
      :tableData="tableData"
      :showHandle="true"
      :pagination="pagination"
      :hideModifyBtn="true"
      :hideDeleteBtn="true"
      @currentPage="goCurrent"
      @sizeChange="sizeChange"
    >
      <template slot-scope="scopes" slot="link">
        <span style="margin-left: 20px">
          <el-link
            @click="handleSubmit(scopes.scope.row)"
            type="primary"
            :underline="false"
          >
            选中并划转
          </el-link>
        </span>
      </template>
    </Table>
    <!-- <div slot="footer" class="dialog-footer text-right">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="handleSubmit" :disabled="!selectedRow">确定</el-button>
        </div> -->
  </el-dialog>
</template>

<script>
import Table from "@/components/Table";
import { getList, delItem } from "@/api/user";
import { pagination } from "@/utils/enumConfig";
import { distribute } from "@/api/customerBase";

export default {
  components: {
    Table,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    customerBaseList: {
      type: Array,
      default: [],
    },
    callback: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    const columnProps = [
      {
        title: "姓名",
        dataIndex: "name",
        key: "name",
      },
      {
        title: "微信头像",
        dataIndex: "headImgUrl",
        key: "headImgUrl",
        width: 100,
        render: (record) => {
          return `<img style="width:50px;height:50px;" src="${record.headImgUrl}"></img>`;
        },
      },
      {
        title: "微信昵称",
        dataIndex: "nickname",
        key: "nickname",
      },
      {
        title: "性别",
        dataIndex: "sex",
        key: "sex",
        width: 100,
        render: (record) => {
          return `<span>${record.sex === 1 ? "男" : "女"}</span>`;
        },
      },
      {
        title: "年龄",
        dataIndex: "age",
        key: "age",
        width: 100,
      },
      {
        title: "手机号",
        dataIndex: "phone",
        key: "phone",
        width: 200,
      },
      {
        title: "创建时间",
        dataIndex: "createTime",
        key: "createTime",
        width: 200,
      },
    ];
    return {
      myVisible: this.visible,
      pagination: this.$_.cloneDeep(pagination),
      tableData: [],
      columnProps,
      selectedRow: null, //选中行
    };
  },
  mounted() {
    let { pageIndex } = this.pagination;
    let param = {
      current: pageIndex,
    };
    this._getStaffList(param);
  },
  methods: {
    close() {
      this.$emit("close", false);
    },
    goCurrent(currentIndex) {
            let { pageSize, pageIndex } = this.pagination;

     let param = {
        ...this.filterParam,
        current: currentIndex,
        size: pageSize
      };

      this._getStaffList(param);
    },
    sizeChange(size) {
      let param = {
        ...this.filterParam,
        current: 1,
        size
      };
      this.$set(this.pagination, "pageSize", size);
      this._getStaffList(param);
    },
    //员工列表
    async _getStaffList(param) {
      let { records, size, total, current } = await getList({
          ...param,
          type: 2,
        }),
        page = this.pagination;
      this.pagination = {
        ...page,
        totalElements: total,
        pageIndex: current,
      };
      this.tableData = records;
    },
    //确定划转
    async handleSubmit(row) {
      this.selectedRow = row;
      let selectedRow = row,
        list = this.customerBaseList,
        { id, name } = selectedRow,
        params = {
          financeManagerId: id,
          financeManager: name,
          ids: list.map((item) => item.id),
        };
      let res = await distribute(params);
      if (res.code === 1) {
        this.$message.success("划转成功！");
        this.callback();
      }
    },
  },
  watch: {
    visible(newV, oldV) {
      this.myVisible = newV;
    },
  },
};
</script>

<style>
</style>